<template>
  <div class="album animate__animated animate__backInLeft">
    <ul>
      <li v-for="item in albumList" :key="item.id" @click="albumpage(item.id)">
        <router-link to="/">
          <div class="imgbox">
            <img :src="item | formatcover(path)" />
            <div>
              <i class="iconfont icon-erji"></i>
              {{ item.playCount | formatPlayCount }}
            </div>
          </div>
          <p :class="$store.state.isblock ? 'pclass' : ''">{{ item.name }}</p>
          <span v-show="$store.state.isblock"
            >by{{ item | formatwriter(path) }}</span
          >
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script >
import { album } from "@/api/recommend";
import { simiPlaylist } from "@/api/play";
// import { hotsong } from "@/api/hot";
export default {
  data: function () {
    return {
      // albumList: JSON.parse(sessionStorage.getItem("albumList")),
      albumList: [],
      path: "",
    };
  },
  methods: {
    albumpage(ID) {
      this.$router.push({
        path: "/playlist",
        query: {
          ID: ID,
        },
      });
    },
  },
  created: function () {
    if (this.$route.path == "/") {
      // this.albumList.length ||
      this.$store.commit("changeIsblock", false);
      album().then((res) => {
        // sessionStorage.setItem("albumList", JSON.stringify(res.data.result));
        this.albumList = res.data.result;
        this.path = "/";
      });
    } else if (this.$route.path == "/play") {
      this.$store.commit("changeMusicID", this.$route.query.ID);
      this.$store.commit("changeIsblock", true);
      simiPlaylist(this.$route.query.ID).then((res) => {
        this.albumList = res.data.playlists;
        this.path = "/play";
      });
    }
  },
  filters: {
    formatcover(item, path) {
      if (path == "/") {
        return item.picUrl;
      } else if (path == "/play") {
        return item.coverImgUrl;
      }
    },
    formatwriter(item, path) {
      if (path == "/play") {
        return item.creator.nickname;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.album {
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 vw(4);
    li {
      flex-basis: 32%;
      margin-bottom: vw(30);
      a {
        display: block;
        color: #000;
        .imgbox {
          position: relative;
          div {
            position: absolute;
            top: vw(6);
            right: vw(6);
            font-size: vw(20);
            color: #fff;
            line-height: 1em;
            i {
              vertical-align: middle;
              padding-right: vw(4);
            }
          }
          img {
            width: 100%;
          }
        }
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: vw(24);
        }
        .pclass {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          font-size: vw(24);
          color: #fff;
        }
        span {
          font-size: vw(16);
          color: hsla(0, 0%, 100%, 0.6);
        }
      }
    }
  }
}
</style>